<!--
 * @Author: gaotang
 * @Date: 2024年12月27日
 * @Email: qq23745038@126.com
 * @LastEditors: gaotang
 * @LastEditTime: 2024-12-27 15:35:39
-->
<template>
  <!--  <div class="page-warp">
   车辆页面
  </div> -->
  <div class="contents">
    <!-- 车辆页面 -->
    <div class="mapwrap">
      <ItemWrap
        v-if="showData"
        :style="{ left: offsetX, top: offsetY }"
        style="height: 305px; width: 420px"
        class="dialog"
        :title="mapTitle"
        @click.native.stop="isMapClick = false"
      >
        <div class="close" @click.stop="showData = false">
          <i class="el-input__icon el-icon-close"></i>
        </div>
        <MapData />
      </ItemWrap>
    </div>
    <div class="content_left">
      <div class="pagetab"></div>
      <div class="content_left-three">
        <ItemWord
          class="content_lr-item"
          title="临沂进出车次"
          style="height: 280px"
        >
          <LeftRightTop />
        </ItemWord>
        <ItemWord class="content_lr-item" title="临沂籍车辆占比" style="height: 280px">
          <LeftRightCenter />
        </ItemWord>
        <ItemWord
          class="content_lr-item"
          title="车辆长跑线路排名"
          style="height: 280px"
        >
          <LeftRightBottom />
        </ItemWord>
      </div>
    </div>
    <div class="content_center">
      <CenterTopStatic class="content_center_top" />
    </div>
    <div class="content_right">
      <div class="content_right-three">
        <ItemWord
          class="content_lr-item"
          title="车辆品牌分布"
          style="height: 280px"
        >
          <RightLeftTop />
        </ItemWord>
        <ItemWord
          class="content_lr-item"
          title="车辆型号分布"
          style="height: 280px"
        >
          <RightLeftCenter />
        </ItemWord>
        <ItemWord class="content_lr-item" title="车龄分布" style="height: 280px">
          <RightLeftBottom />
        </ItemWord>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import LeftRightTop from './left-right-top.vue';
import LeftRightCenter from './left-right-center.vue';
import LeftRightBottom from './left-right-bottom.vue';

import CenterTopStatic from './center-top-static.vue';

import RightLeftTop from './right-left-top.vue';
import RightLeftCenter from './right-left-center.vue';
import RightLeftBottom from './right-left-bottom.vue';
export default {
  components: {
    LeftRightTop,
    LeftRightCenter,
    LeftRightBottom,
    CenterTopStatic,
    RightLeftTop,
    RightLeftCenter,
    RightLeftBottom,
    MapData,
  },
  name: 'CarMain',
  data() {
    return {
      cursor: '<!-- 自定义内容 -->',
    };
  },
};
</script>

<style lang="scss" scoped>
.page-warp {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 15px;
  z-index: 0;
  width: 100%;
  height: 100%;
  // border: 1px solid red;

  background: url('../../assets/img/bg4.png') no-repeat center;
  background-position: center center;
  background-size: 100% 100%;
  margin-bottom: 460px;
}
</style>
<style lang="scss" scoped>
.contents {
  // position: relative;
  // top: 0;
  .mapwrap {
    margin-top: -20px;
    margin-bottom: -50px;
    height: 580px;
    width: 100%;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    // border: 1px solid red;

    .close {
      position: absolute;
      right: 15px;
      top: 10px;
      cursor: pointer;
    }

    .dialog {
      width: 400px;
      height: 200px;
      position: absolute;
      z-index: 999;
    }
  }

  .content_left,
  .content_right {
    width: 1040px;
    box-sizing: border-box;
    margin-top: -30px;
    margin-bottom: 30px;
    display: flex;
    justify-content: space-around;
    position: relative;
  }

  // 中间
  .content_center {
    width: 2000px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }

  //左右两侧 三个块
  .content_lr-item {
    // width: 95%;
  }

  .content_center_top {
    width: 100%;
    height: 105px;
  }

  .content_left-one,
  .content_left-two,
  .content_left-three,
  .content_right-one,
  .content_right-two,
  .content_right-three {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    width: 450px;
  }

  // .content_left-one,
  // .content_right-one {
  //   width: 520px;
  // }

  // .content_left-three,
  // .content_right-three {
  //   width: 580px;
  // }
}

@keyframes rotating {
  0% {
    -webkit-transform: rotate(0) scale(1);
    transform: rotate(0) scale(1);
  }

  50% {
    -webkit-transform: rotate(180deg) scale(1.1);
    transform: rotate(180deg) scale(1.1);
  }

  100% {
    -webkit-transform: rotate(360deg) scale(1);
    transform: rotate(360deg) scale(1);
  }
}
</style>
